<template>
	<view class="viewimg">
		<view>
			<button @click="updateClick">更新数据</button>
		</view>
		<view class="salesolume">
			<view class="so">
				<view class="so1">
					实时销量:
				</view>
				<view class="so2">
					{{querySaleInfoByStId.totalSaleAmount}} 元
				</view>
			</view>
			
			<view class="so3 so">
				<view class="so4">
					店铺名称:
				</view>
				<view class="so5">
					{{querySaleInfoByStId.storeName}}
				</view>
			</view>
		</view>
		
		<!-- 列表 -->
		<div class="teb2">
			
			<!-- 内容切换 -->
			<view class="content">
					<div class="contents" v-for="i in productSaleDt">
							<img :src=i.orderProducts[0].dtPic1 alt="" class="imgs">
							<p class="size">{{i.orderProducts[0].productName}}</p>
							<p class="size1">{{i.orderProducts[0].productName}} *{{i.orderProducts[0].count}}{{i.orderProducts[0].unit}}</p>
							<p class="font">共 {{i.orderProducts[0].unitPrice}} 元</p>
							<p class="size2">( 可提现额 {{i.storePltMny}} 提现手续费 {{i.pltCommission}} )</p>
					</div>
			</view>
		</div>
	</view>
</template>
 
<script>
import { querySaleInfoByStId,queryOrdersByPrarmSt } from '@/api/new.js'
	import {mapMutations,mapState} from 'vuex'

export default {
	data() {
		return {
			option: {},
			querySaleInfoByStId:{},
			productSaleDt:[],
			ProductSaletext:[],
			ProductSaledata:[],
		};
	},
	onLoad() {
	},
	computed: {
		...mapState({
			loginStatus: state => state.user.loginStatus,
			userInfo: state => state.user.userInfo
		})
	},
	mounted() {
		let data1 = {
			id:this.userInfo.storeId
		}
		querySaleInfoByStId(data1).then(res => {
			this.querySaleInfoByStId = res.data.data
			
		})
		this.getdata()
	},
	methods: {
		updateClick(){
			this.ProductSaletext=[]
			this.ProductSaledata=[]
			this.getdata()
		},
		getdata(){
			let data = {
				storeId:this.userInfo.storeId,
				status:5
			}
			queryOrdersByPrarmSt(data).then(res => {
				if(res.data.code == 200){
					this.productSaleDt = res.data.data
					for(var i = 0;i<this.productSaleDt.length;i++){
						this.ProductSaletext.push(this.productSaleDt[i].orderProducts[0].productName),
						this.ProductSaledata.push(this.productSaleDt[i].orderProducts[0].unitPrice)
					}
					this.logstatrt();
				}
			})
		},
		logstatrt() {
			this.option = {
				color: ['#3398DB'],
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            data : this.ProductSaletext,
				            axisTick: {
				                alignWithLabel: true
				            }
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'销量',
				            type:'bar',
				            barWidth: '20%',
							center:['0%','0%'],
				            data:this.ProductSaledata
				        }
				    ]
				
			};
		},

	}
};
</script>
<style>
.viewimg {
	height: 100%;
	/* background: #d1e9e9; */
}
.salesolume{
	width: 100%;
}
.so{
	width: 100%;
	display: flex;
	margin-top: 20px;
}
.so1{
	padding-left: 15px;
	font-weight: bold;
}
.so2{
	padding-top: 3px;
	margin-left: 23px;
}
.so4{
	padding-left: 15px;
	font-weight: bold;
}
.so5{
	padding-top: 0px;
	margin-left: 23px;
}

	.teb2{
		margin-top: 60rpx;
	}
	.content .contents{
		width: 100%;
		height: 108px;
		border-bottom: 1px solid #E4E4E4;
	  		  
	}
	.content .contents img{
		width: 90px;
		height: 90px;
		margin-left: 10px;
	}
	.size{
		font-size: 28rpx;
		color: #000;
		font-weight: 600;
		position: relative;
        bottom: 80%;
		left: 31%;
	}
	.size1{
		width: 150px;
	  	font-size: 12px;
	  	color: #000;
	  	position: relative;
	    bottom: 75%;
	  	left: 31%;	
		word-wrap:break-word; 
		word-break:break-all;
	}
	.font{
	  	font-size: 32rpx;
	  	color: #000;
	  	position: relative;
	    bottom: 70%;
	  	left: 31%;
		font-weight: bold;
	}
	.font1{
	  	font-size: 9px;
	  	color: #000;
		font-weight: bold;
	}
	.size2{
		width: 200px;
		font-size: 22rpx;
		color: #a1a1a1;
		position: relative;
		bottom: 65%;
		left: 31%;
		word-wrap: break-word;
		word-break: break-all;
	}
	.dizhi{
		font-weight: bold;
		font-size: 9px;
		width: 89px;
		position: relative;
		bottom: 112%;
		left: 74%;
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow:ellipsis;
	}
	.dizhi1{
	  	font-size: 7px;
	  	position: relative;
	  	bottom: 100%;
	  	left: 31%;
	}
	.btn{
		position: relative;
		bottom: 30%;
	}
	.ps{
		font-size: 8px;
		display: inline-block;
		background: aqua;
		color: cornflowerblue;
		text-align: center;
		position: absolute;
		left: 30%;
		bottom: 44px;
		width: 53px;
		border-radius: 10px;
	}
    .jj{
	  	background: bisque;
	  	font-size: 8px;
	  	display: inline-block;
	  	color: cornflowerblue;
	  	text-align: center;
	  	position: absolute;
	  	left: 30%;
	  	bottom: 44px;
	  	width: 53px;
	  	border-radius: 10px;
	}
	.hj{
	  	font-size: 8px;
	  	font-weight: bold;
	  	/* width: 53px;	 */
	  	position: relative;
	  	bottom: 88%;
	  	left: 75%;
	  	border-radius: 10px;
	}
	.p1{
		float: right;
		padding-top: 30px;
		margin-right: 17px;
	}
</style>